<template>
  <transition name="drawer-slide">
    <div
      v-if="visible"
      class="drawer-overlay"
      @click="handleOverlayClick"
    >
      <div
        class="drawer-container"
        @click.stop
      >
        <div class="drawer-header">
          <h3 class="drawer-title">{{ title }}</h3>
        </div>
        <div class="drawer-content">
          <slot></slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '抽屉'
  },
  maskClosable: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['close', 'update:visible'])

const handleClose = () => {
  emit('update:visible', false)
  emit('close')
}

const handleOverlayClick = () => {
  if (props.maskClosable) {
    handleClose()
  }
}
</script>

<style scoped lang="scss">
.drawer-overlay {
  position: fixed;
  top: calc(var(--layout-height) + 1px);
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}

.drawer-container {
  width: 450px;
  background-color: #fff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  will-change: transform;
  backface-visibility: hidden;
}

.drawer-header {
  height: 60px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f2f5;
}

.drawer-title {
  height: 100%;
  margin: 0;
  padding: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 60px;
  text-indent: 20px;
}

.drawer-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}




.drawer-slide-enter-active,
.drawer-slide-leave-active {
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.drawer-slide-enter-from,
.drawer-slide-leave-to {
  transform: translateX(100%);
  opacity: 0.6;
}

.drawer-slide-enter-to,
.drawer-slide-leave-from {
  transform: translateX(0);
  opacity: 1;
}
</style>
